<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="../libs/bootstrap/css/bootstrap.min.css">
</head>
<body ng-app="myApp" ng-controller="MyController">
    <div class="container">
        <div class="page-header">
            <h1>属性指令</h1>
        </div>
        <div class="panel panel-danger">
            <div class="panel-heading">
                ng-bind内置指令
            </div>
            <div class="panel-body">
                <p ng-bind="ng_Bind"></p>
            </div>
        </div>

        <div class="panel panel-danger">
            <div class="panel-heading">
                ng-init内置指令
            </div>
            <div class="panel-body" ng-init="ng_init='这是ngInit'">
                <p ng-bind="ng_init"></p>
            </div>
        </div>


        <div class="panel panel-danger">
            <div class="panel-heading">
                ng-bind-template 指令用于告诉 AngularJS 将给定表达式的值替换 HTML 元素的内容。
            </div>
            <div class="panel-body" ng-init="firstName='He';secondName='Yongfeng'">
                <p ng-bind-template="{{firstName}}{{secondName}}" ></p>
            </div>
        </div>

        <div class="panel panel-danger">
            <div class="panel-heading">
                ng-include 加载一个网页
            </div>
            <div class="panel-body" ng-init="firstName='He';secondName='Yongfeng'">
                <p ng-include="'other.html'"></p>
            </div>
        </div>

        <div class="page-header">
            <h1>事件指令 <small>好处:自动处理脏事件,自动调用$apply方法</small></h1>
        </div>


        <div class="panel panel-success">
            <div class="panel-heading">
                ng-change 表单输入变化
            </div>
            <div class="panel-body" ng-init="firstName='He';secondName='Yongfeng'">
                <input type="text" class="form-control" ng-change="Change(inputVal)" ng-model="inputVal">
                <p>输入的内容：{{inputVal}}</p>
            </div>
        </div>

        <div class="panel panel-success">
            <div class="panel-heading">
                ng-click
            </div>
            <div class="panel-body" ng-init="firstName='He';secondName='Yongfeng'">
                <button class="btn btn-primary" ng-click="clickBtn($event)">点击</button>
            </div>
        </div>


        <div class="panel panel-success">
            <div class="panel-heading">
                ng-dblclick
            </div>
            <div class="panel-body" ng-init="firstName='He';secondName='Yongfeng'">
                <button class="btn btn-primary" ng-dblclick="dblClickBtn()">双击</button>
            </div>
        </div>

    </div>
</body>
</html>

<script src="../libs/AngularJS.min.js"></script>
<script src="../libs/jquery3_1_1.min.js"></script>
<script src="js/index.js"></script>